import 'package:flutter/material.dart';

class StepsDetailPage extends StatefulWidget {
  const StepsDetailPage({Key? key}) : super(key: key);

  @override
  State<StepsDetailPage> createState() => _StepsDetailPageState();
}

class _StepsDetailPageState extends State<StepsDetailPage> {
  int _selectedTabIndex = 0;
  final List<String> _tabs = ['Day', 'Week', 'Month'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: const Color(0xFF1DC4A0),
        elevation: 0,
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => Navigator.pop(context),
        ),
        title: Text(
          '步数',
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                // 添加按钮
                Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.blue, width: 1.5),
                  ),
                  child: Icon(
                    Icons.add,
                    color: Colors.blue,
                  ),
                ),

                // 标签切换
                Row(
                  children: List.generate(_tabs.length, (index) {
                    final isSelected = _selectedTabIndex == index;
                    return _buildTab(_tabs[index], isSelected, () {
                      setState(() {
                        _selectedTabIndex = index;
                      });
                    });
                  }),
                ),

                // 设置按钮
                Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    border: Border.all(color: Colors.blue, width: 1.5),
                  ),
                  child: Icon(
                    Icons.settings,
                    color: Colors.blue,
                  ),
                ),
              ],
            ),
          ),

          // 步数圆环
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 20),
            child: SizedBox(
              height: 220,
              child: Stack(
                alignment: Alignment.center,
                children: [
                  SizedBox(
                    width: 200,
                    height: 200,
                    child: CircularProgressIndicator(
                      value: 0.73,
                      strokeWidth: 15,
                      backgroundColor: Colors.blue.shade100,
                      valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                    ),
                  ),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: [
                          Image.asset(
                            'assets/icons/home.png',
                            width: 24,
                            height: 24,
                            color: Colors.blue,
                          ),
                          SizedBox(width: 8),
                        ],
                      ),
                      SizedBox(height: 4),
                      Text(
                        '7.384',
                        style: TextStyle(
                          fontSize: 42,
                          fontWeight: FontWeight.bold,
                          color: Colors.blue.shade800,
                        ),
                      ),
                      Text(
                        'Steps',
                        style: TextStyle(
                          fontSize: 16,
                          color: Colors.blue.shade400,
                        ),
                      ),
                      SizedBox(height: 8),
                      Text(
                        'Goal 10.000',
                        style: TextStyle(
                          fontSize: 14,
                          color: Colors.blue.shade400,
                        ),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),

          // 统计信息
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 30),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                _buildStatItem('1200 m', '距离', Icons.location_on),
                _buildStatItem('182 kcal', '消耗', Icons.local_fire_department),
                _buildStatItem('160 min', '时间', Icons.timer),
              ],
            ),
          ),

          // 周统计
          Padding(
            padding: const EdgeInsets.only(top: 30),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                _buildDayLabel('MON'),
                _buildDayLabel('TUE'),
                _buildDayLabel('WED'),
                _buildDayLabel('THU'),
                _buildDayLabel('FRI'),
                _buildDayLabel('SAT'),
                _buildDayLabel('SUN', isSelected: true),
              ],
            ),
          ),

          // 图表
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Container(
                width: double.infinity,
                height: double.infinity,
                child: CustomPaint(
                  painter: StepsChartPainter(),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildTab(String text, bool isSelected, VoidCallback onTap) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        decoration: BoxDecoration(
          border: isSelected
              ? Border(
                  bottom: BorderSide(
                    color: Colors.blue,
                    width: 2,
                  ),
                )
              : null,
        ),
        child: Text(
          text,
          style: TextStyle(
            color: isSelected ? Colors.blue : Colors.grey,
            fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
          ),
        ),
      ),
    );
  }

  Widget _buildStatItem(String value, String label, IconData icon) {
    return Column(
      children: [
        Container(
          width: 50,
          height: 50,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.blue.shade100,
          ),
          child: Icon(
            icon,
            color: Colors.blue,
            size: 24,
          ),
        ),
        SizedBox(height: 8),
        Text(
          value,
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 14,
          ),
        ),
        Text(
          label,
          style: TextStyle(
            color: Colors.grey,
            fontSize: 12,
          ),
        ),
      ],
    );
  }

  Widget _buildDayLabel(String text, {bool isSelected = false}) {
    return Column(
      children: [
        Text(
          text,
          style: TextStyle(
            fontSize: 12,
            color: isSelected ? Colors.blue : Colors.grey,
            fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
          ),
        ),
        if (isSelected)
          Container(
            margin: EdgeInsets.only(top: 4),
            width: 4,
            height: 4,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.blue,
            ),
          ),
      ],
    );
  }
}

class StepsChartPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final Paint linePaint = Paint()
      ..color = Colors.blue.shade400
      ..strokeWidth = 3
      ..style = PaintingStyle.stroke;

    final Paint fillPaint = Paint()
      ..shader = LinearGradient(
        colors: [
          Colors.blue.shade300.withOpacity(0.7),
          Colors.blue.shade100.withOpacity(0.1),
        ],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      ).createShader(Rect.fromLTWH(0, 0, size.width, size.height));

    final Path linePath = Path();
    final Path fillPath = Path();

    final List<double> points = [0.4, 0.6, 0.5, 0.7, 0.9, 0.6, 0.3];

    final double dx = size.width / (points.length - 1);

    linePath.moveTo(0, size.height * (1 - points[0]));
    fillPath.moveTo(0, size.height);
    fillPath.lineTo(0, size.height * (1 - points[0]));

    for (int i = 1; i < points.length; i++) {
      final double x = dx * i;
      final double y = size.height * (1 - points[i]);

      // 添加曲线
      if (i < points.length - 1) {
        final double nextX = dx * (i + 1);
        final double nextY = size.height * (1 - points[i + 1]);

        final double controlX1 = x - dx / 3;
        final double controlY1 = y;
        final double controlX2 = x + dx / 3;
        final double controlY2 = nextY;

        linePath.cubicTo(
            controlX1, controlY1, controlX2, controlY2, nextX, nextY);
        fillPath.cubicTo(
            controlX1, controlY1, controlX2, controlY2, nextX, nextY);
      } else {
        linePath.lineTo(x, y);
        fillPath.lineTo(x, y);
      }
    }

    // 完成填充路径
    fillPath.lineTo(size.width, size.height);
    fillPath.close();

    // 绘制填充区域
    canvas.drawPath(fillPath, fillPaint);

    // 绘制线条
    canvas.drawPath(linePath, linePaint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}
